<!DOCTYPE html>
<html lang="en">
    <!--做好自己的启动页 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基本模板</title>
    <!-- 1. 引入模板 -->
    <style>
        [v-cloak]{display: none;}
    </style>
    <!-- 倒入vue库 -->
    <script src="./js/vue.js"></script>
    <style>
        [v-v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 2. 绑定标签，就可以修改内容 -->
    <div id="appVue">
        <a href="https://cn.vuejs.org">Vue教程</a>
        <!-- <input v-on:keyup.enter="myfun" type="text"> -->
        <!-- <button v-on:click='myfun'>btn</button> -->
        <!-- <button @click='myfun'>btn</button> -->
        <!-- <button @click.once='myfun'>btn</button> -->
        <!-- <button @click="func('ljj',22)">btn</button> -->

        <!-- 3. 更新数据部分 -->
        <!-- <p v-cloak>+{{name}}</p> -->
        <!-- <p>===={{msg}}====</p>-->
        <p v-html='name'></p>
        <!-- <p v-html='msg'></p> --> 
        <a href="https://www.bilibili.com/video/BV1U5411h7oH?p=19&spm_id_from=pageDriver">vue进度</a>
        <!-- 标准语法mvvm中的vm -->
        <!-- <p v-cloak>{{name}}</p> -->
        <p v-html='name'>+++</p>
        <p v-html='msg'>+++</p>
        <p v-if='show'>内容显示</p>
        <p v-if='age>=18'>成年人</p>
        <!-- v-if  v-elif v-else -->
        <p v-else>未成年</p>
        <!-- 双向传递需要借助 v-model 属性 -->
        <!-- <input type="text" v-model="msg"> -->
        <!-- <input type="text" v-bind:value="name">  -->
        <!-- <input type="text" :value="name"> -->

        <ul>
            <li v-for='(value,index) in list'>{{index}}--{{value}}</li>
            <li v-for='(value,key) in obj'>{{key}}--{{value}}</li>
        </ul>
        <p style="color: red;">段落标签</p>
        <!-- 如果样式的名称带有减号，也需要使用引号 -->
        <!-- <p :style="{color:'red','font-size':'20px'}">段落标签2</p> -->
        <p :style='sobj'>段落标签1</p>
    </div>
    <script>
        // 创建Vue实例对象 view model
        let vue = new Vue({
            // 对象控制界面的区域
            el: '#appVue',
            // 更新数据，mvvm中的model
            data: {
                name: '<span>Y禁锢</span>',
                msg:'placetext',
                show:false,
                age:24,
                list:['lj1','lj2','lj3','lj4'],
                obj:{
                    name:'jin gu',
                    age:30,
                    gender:'man',
                    class:'freedom',

                },
                sobj:{
                    'color':'red',
                    'font-size':'20px'
                }
            },
            methods:{
                myfun(){
                    alert('function')
                },
                func(name,age){
                    console.log(name,age)
                }
            }
        });
    </script>
</body>

</html>

<!-- 
    数据绑定的问题，如果网速比较慢，数据没有及时获取，
    则会将模板展示给用，体验极差，v-cloak解决
vue优势是数据驱动
1. MVVM设计模式，支持数据的双向传递 
M：Model 数据模型
V：View 视图
VM：View Model 数据模型和视图的桥梁
v-once 修饰的标签内的数据只修改一次
v-cloak  配合css使用，实现数据懒加载
v-if  v-elif v-else 条件判断
v-show 切换css属性 v-if 创建对象
v-for 可以遍历数组/字典/字符串/对象
v-model 只能用于input/textare/select标签，其他的使用v-bind
v-bind 还可以绑定样式
v-on 监听点击事件 v-on:click='fun'
    属性v-on:click.once='fun'
    stop 切断事件的响应链
v-on:keyup.enter 按键修饰符
vue 自定义属性 如：v-color 有bind和instead两种状态
-->

